<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript能够直接写入HTML输出流中</title>
    <script type="text/javascript">
      function write() {
          document.write("<h1>这是一个标题</h1>");
          document.write("<p>这是一个段落</p>");
      }
    </script>
  </head>
  <body>
    <ul>
      <li>
        <h3>JavaScript：能够直接写入HTML输出流中</h3>
        <script type="text/javascript">
          document.write("<h1>这是一个标题</h1>");
          document.write("<p>这是一个段落</p>");
        </script>
        <p onclick="write()">只能在HTML输出流中使用 <strong>document.write</strong> 如果在文档加载后使用，会覆盖整个文档</p>
      </li>
      <li>
        <h3>JavaScript：对事件的响应</h3>
        <p>JavaScript能够对事件作出反应。比如按钮的点击：</p>
        <button type="button" onclick="alert('Hello JavaScript!')">显示一个对话框</button>
      </li>
      <li>
        <h3>JavaScript：改变HTML内容</h3>
        <p id="js_html">JavaScript能改变HTML元素的内容</p>
        <script type="text/javascript">
          function changeHtml() {
            x=document.getElementById('js_html');
            x.innerHTML="Hello JavaScript!";
          }
        </script>
        <button type="button" onclick="changeHtml()">改变上面段落的内容</button>
      </li>
      <li>
        <h3>JavaScript：改变HTML图像</h3>
        <p>点击灯泡开关灯</p>
        <script type="text/javascript">
          function changeImage() {
            image=document.getElementById('js_image');
            if (image.src.match("bulbon")) {
              image.src="images/pic_bulboff.gif";
            }else {
                image.src="images/pic_bulbon.gif";
            }
          }
        </script>
        <img id="js_image" src="images/pic_bulboff.gif" width="100" height="180" onclick="changeImage()">
      </li>
      <li>
        <h3>JavaScript：改变HTML样式</h3>
        <p id="js_style">JavaScript能改变HTML元素的样式</p>
        <script type="text/javascript">
          function changeStyle() {
            p=document.getElementById('js_style');
            p.style.color="#ff0000";
          }
        </script>
        <button type="button" onclick="changeStyle()">改变上面段落的颜色为红色</button>
      </li>
      <li>
        <h3>JavaScript：验证输入</h3>
        <p>请输入数字，如果输入的不是数字，会弹出提示</p>
        <script type="text/javascript">
          function checkIsNumber() {
            var x=document.getElementById('js_check_input').value;
            if (x==""||isNaN(x)) {
              alert('输入的“'+x+'”不是数字')
            }
          }
        </script>
        <input type="text" id="js_check_input">
        <button type="button" onclick="checkIsNumber()">验证输入的是否为数字</button>
      </li>
    </ul>
  </body>
</html>
